<template>
  <section id="personalCenter">
    <V-CommonHeaderLeft>
      <div class="personalCont">
        <div class="personalNav">
          <router-link to="/index">首页</router-link>
          <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>
          <router-link to="/personalCenter">个人中心</router-link>
        </div>
        <div class="personalContMain">
          <div class="personalHeader">
            <p>个人中心</p>
          </div>
          <div class="personalContMainer">
            <div class="mainerHeade">
              <i></i>
              <span>
                基本信息
                <span>
                  (
                  <i>*</i>
                  必填）
                </span>
              </span>
            </div>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-row :gutter="20" class="edit24">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div>
                      <ul class="mainerHeadeUlkl mainerHeadeUl">
                        <li>
                          <div>
                            <el-form-item label="员工姓名" prop="inputName">
                              <el-input v-model="ruleForm.inputName" placeholder="请输入您的姓名"></el-input>
                            </el-form-item>
                          </div>
                        </li>
                        <li>
                          <div>
                            <el-form-item label="职位" prop="inputJob">
                              <el-input
                                v-model="ruleForm.inputJob"
                                placeholder="请输入您的职位"
                                :disabled="true"
                              ></el-input>
                            </el-form-item>
                          </div>
                        </li>
                        <li>
                          <div>
                            <el-form-item label="Email" prop="inputEmail">
                              <el-input v-model="ruleForm.inputEmail" placeholder="请输入您的邮箱地址"></el-input>
                            </el-form-item>
                          </div>
                        </li>
                        <li>
                          <div>
                            <el-form-item label="手机号码" prop="inputPhone">
                              <el-input v-model="ruleForm.inputPhone" placeholder="请输入您的手机号码"></el-input>
                            </el-form-item>
                          </div>
                        </li>
                        <li>
                          <div>
                            <el-form-item label="QQ" prop="inputQQ">
                              <el-input v-model="ruleForm.inputQQ" placeholder="请输入您的QQ号"></el-input>
                            </el-form-item>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div>
                      <ul class="mainerHeadeUlkl mainerHeadeUl">
                        <li>
                          <div>
                            <el-form-item label="编号" prop="inputserial">
                              <el-input
                                v-model="ruleForm.inputserial"
                                placeholder="请输入您的编号"
                                :disabled="true"
                              ></el-input>
                            </el-form-item>
                          </div>
                        </li>
                        <li>
                          <div>
                            <el-form-item label="部门" prop="inputSection">
                              <el-input
                                v-model="ruleForm.inputSection"
                                placeholder="请输入您所在的部门"
                                :disabled="true"
                              ></el-input>
                            </el-form-item>
                          </div>
                        </li>
                        <li class="userImgS">
                          <div>
                            <p>头像</p>
                            <!-- 注意设置上传地址 -->
                            <el-upload
                              class="avatar-uploader"
                              action="https://jsonplaceholder.typicode.com/posts/"
                              :show-file-list="false"
                              :on-success="handleAvatarSuccess"
                              :before-upload="beforeAvatarUpload"
                            >
                              <img v-if="imageUrl" :src="imageUrl" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <div class="mainerHeade">
                <i></i>
                <span>员工账户</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div>
                      <ul class="mainerHeadeUl">
                        <li>
                          <div>
                            <p>账号</p>
                            <span>1515388963</span>
                          </div>
                        </li>
                        <li>
                          <div>
                            <p>密码</p>
                            <span>······</span>
                            <p class="editMm" @click="$router.push({path:'/changePwd'})">修改密码</p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div>
                      <ul class="mainerHeadeUl">
                        <li>
                          <div>
                            <p>绑定手机号</p>
                            <span>1258963258</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-form>
            <div class="submitStyle">
              <span @click="$router.push({path:'/personalCenter'})">
                <svg class="icon iconselfe" aria-hidden="true">
                  <use xlink:href="#icon-test129"></use>
                </svg>
                提交
              </span>
            </div>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </section>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        // console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    var callEmile = (rule, value, callback) => {
      if (!value) {
        // callback()
      } else {
        const reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        // console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的邮箱地址'))
        }
      }
    }
    var passwordNumb = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入您的姓名'))
      } else {
        callback()
      }
    }
    return {
      imageUrl: 'static/img/o_1bkot63pb1tdj1jt01hf01ie7d2m7.87ac429b.png',
      ruleForm: {
        inputName: '陈素然',
        inputJob: '前端高级架构师',
        inputEmail: '1575502816@qq.com',
        inputPhone: '15153978025',
        inputQQ: '1522566960',
        inputserial: 'A0025896325sX',
        inputSection: '前端高级架构师终端部'
      },
      rules: {
        inputName: [{ required: true, validator: passwordNumb, trigger: 'blur' }],
        inputPhone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
        inputEmail: [{ validator: callEmile, trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss" scoped>
.personalCont {
  width: 100%;
  padding: 0 10px 10px 0;
}
.personalNav {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.personalCont > div {
  color: #333333;
  font-size: 14px;
}
.personalContMain {
  width: 100%;
  height: calc(100vh - 120px);
  background-color: #ffffff;
}
.personalHeader {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e3e3e3;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.personalHeader > p {
  margin-left: 30px;
  width: 90px;
  height: 47px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #20ade5;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 3px solid #20ade5;
}
.personalHeader > span {
  margin-right: 30px;
  width: 100%;
  color: #20ade5;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.personalHeader > span:hover {
  cursor: pointer;
}

.personalContMainer {
  padding: 0 30px;
  height: calc(100vh - 180px);
  overflow-y: scroll;
}
/*滚动条样式*/
.personalContMainer::-webkit-scrollbar {
  width: 8px;
  /*height: 4px;*/
}
//滚动部分
.personalContMainer::-webkit-scrollbar-thumb {
  // border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(195, 195, 195, 1);
}
//总体部分
.personalContMainer::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(195, 195, 195, 0.1);
}
.mainerHeade {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e3e3e3;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
}
.mainerHeade > span > span {
  color: #b3b3b3;
  font-size: 12px;
  font-weight: normal;
}
.mainerHeade > span > span > i {
  color: #ff3838 !important;
}
.mainerHeade > i {
  margin-right: 8px;
  width: 2px;
  height: 16px;
  background: #333333;
}
.mainerHeadeUl {
  padding: 0 30px !important;
}
.mainerHeadeUl > li > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.mainerHeadeUl > li {
  height: 50px;
  line-height: 50px;
  list-style-type: disc !important;
  color: #666666;
  border-bottom: 1px solid #f5f5f5;
}
.mainerHeadeUl > li p {
  width: 80px;
}
.mainerHeadeUl > li span {
  margin-left: 120px;
}
.userImgS {
  height: 120px !important;
}
.userImgS > div {
  height: 120px;
}
.userImgS img {
  margin-left: 120px;
  width: 100px;
  height: 100px;
}
.editMm {
  margin-left: 200px;
  color: #20ade5;
}
.editMm:hover {
  cursor: pointer;
}
.edit24 li {
  list-style-type: none !important;
}
.el-form-item {
  width: calc(100% - 100px);
}
.mainerHeadeUlkl > li {
  height: 65px;
}
.mainerHeadeUlkl > li > div {
  margin-top: 20px;
}
.submitStyle {
  margin: 0 -30px;
  position: absolute;
  bottom: 10px;
  z-index: 9;
  width: calc(100% - 140px);
  height: 62px;
  border-top: 1px solid #e3e3e3;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.submitStyle > span {
  width: 140px;
  height: 42px;
  background-color: #20ade5;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.submitStyle > span:hover {
  cursor: pointer;
}
.iconselfe {
  color: #ffffff;
  font-size: 16px;
  margin-right: 8px;
}
</style>
